<template>
	<view class="box-c page">

		<!-- 分类栏 -->
		<view class="box list2">
			<view class="box category-scroll">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
					<view @tap='changTap(index,item)' class="scroll-view-item_H mx-2" :class="categoryIndexFlag==index?'categoryFlag':''" v-for="(item,index) in categoryList">{{item.classifyName}}</view>
				</scroll-view>
			</view>

			<view class="box d-ai-c category-icon box d-jc-c">
				<text class="iconfont iconleibie"></text>
			</view>
		</view>
		<!-- 活动列表 -->
		<view class="list-3 box mt-1 box-c" v-if="!isShow">
			<scroll-view lower-threshold="400" @scrolltolower='nextPage()' :style="{height:activityHeight+'px'}" scroll-y refresher-default-style='white'
				:refresher-threshold="45"  :refresher-triggered="refresherTriggered"
				@refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore"
				@refresherabort="refresherabort">
				<view class="activity_t" @tap="Jumpteamcenter(1)">
					<image class="activity_Img" src="../../static/images/shoplist/b1@2x.png" mode=""></image>
				</view>
				
				<view @tap='handleAcivityInfo(item)' class="box activity mb-2 p-2" :key=index v-for="(item,index) in activityList">
					<view class="">
						<image :src="item.logo" mode="scaleToFill"></image>
					</view>
					<view class="ml-1 box-c">
						<text class="title flex-1 text-heide-2">{{item.title}}</text>
						<view class="describe flex-1 box-c d-jc-end">
							<view class="text-heide-1">{{item.startTime |dateFormat}} 到 {{item.endTime |dateFormat}}</view>
							<view class="text-heide-1">{{item.city}}{{item.district}}</view>
						</view>
					</view>
				</view>
			</scroll-view>

	</view>
	<view class="activity-null box-c d-jc-c d-ai-c mt-5" v-if="isShow">
		<image src="../../static/images/activity/hd@2x.png" mode=""></image>
		<text class="mt-3">还没有活动可以报名，看看其他的吧~</text>
	</view>
		</view>
</template>

<script>
	export default {
		name: "activity",
		props:{
			activityHeight:{
				type:Number,
				default:500
			},
			city:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				shopName: '活动中心',
				parameter: {

				},
				pageNum: 1,
				pageSize: 10,
				addressName: [],
				longitude: '',
				latitude: '',
				refresherTriggered: false,
				_refresherTriggered: false,
				height: '500',
				categoryIndexFlag:0, //类别激活索引
				activityList:[], //活动列表
				categoryList:[] ,//分类列表
				categoryId:'' ,//分类id
				hasNextPage:true ,//是否存在下一页
				isShow:false,

			};
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.height = res.windowHeight - uni.upx2px(270) //windoHeight为窗口高度，主要使用的是这个
		
				}
			})
		},
		mounted() {
			// this.getListActivityClassify()
		},
		onShow() {
		},
		methods: {
			//跳转团队中心
			Jumpteamcenter(type){
				uni.navigateTo({
					url:'../../pages/teamcenter/teamcenter?type='+type
				})
			},
			nextPage(){
				if (this.hasNextPage) {
					this.pageNum++
					this.getListActivity(this.categoryId)
				}
				
			},
			// 获取活动分类列表
			getListActivityClassify(){
				let _this = this
				this.pageNum=1
				this.activityList=[]
				this.categoryIndexFlag=0 //类别激活索引
				this.$api.getListActivityClassify().then((res)=>{
					_this.categoryList = res.data.dataMap
					_this.categoryId = _this.categoryList[0].id
					_this.getListActivity(_this.categoryId)
				})
			},
			
			//切换类目
			changTap(index,data){
				this.categoryIndexFlag=index
				this.categoryId = data.id
				//清空数组和分页信息
				this.pageNum=1
				this.activityList=[]
				this.getListActivity(this.categoryId)
			},
			//活动列表
			getListActivity(classifyId){
				let _this = this
				this.$api.getListActivity({
					classifyId:classifyId,
					city:_this.city
				},_this.pageNum,_this.pageSize).then((res)=>{
					_this.hasNextPage = res.data.dataMap.hasNextPage
					_this.activityList = _this.activityList.concat(res.data.dataMap.list)
					if(this.activityList.length<1){
						this.isShow=true
					}else{
						this.isShow=false
					}
				})
			},
		
			//打开详情页面
			handleAcivityInfo(data) {
				uni.navigateTo({
					url: '../../pages/activity/activity-info?id='+data.id
				})

			},
			refresherrefresh() {
				console.log("自定义下拉刷新被触发");
				let _this = this;
				if (_this._refresherTriggered) {
					return;
				}
				_this._refresherTriggered = true;
				//界面下拉触发，triggered可能不是true，要设为true
				if (!_this.refresherTriggered) {
					_this.refresherTriggered = true;
				}
				this.loadStoreData();
			},
			refresherrestore() {
				console.log("自定义下拉刷新被复位");
				let _this = this;
				_this.refresherTriggered = false;
				_this._refresherTriggered = false;
			},
			refresherabort() {
				console.log("自定义下拉刷新被中止	");
				let _this = this;
				_this.refresherTriggered = false;
				_this._refresherTriggered = false;
			},
			loadStoreData() {
				let _this = this;
				this.listData();
				setTimeout(() => {
					_this.refresherTriggered = false; //触发onRestore，并关闭刷新图标
					_this._refresherTriggered = false;
				}, 500)
			},
			listData() {
				let _this = this;
				//这里是调用后台接口的方法数据
				this.getListActivity(this.categoryId)
			},

			//定位监听
			handleAdress() {
				uni.$on("handleAddress", res => {
					this.longitude = res.parameter.longitude
					this.latitude = res.parameter.latitude
					this.addressName = res.parameter.name
					// 清除监听
					uni.$off('handleAddress');
				})
			},
			getCityBylng() {
				let _this = this
				// permision.gotoAppPermissionSetting()
				// let flag = permision.checkSystemEnableLocation()
				let flag = true
				console.log(flag)

				if (flag) {
					//开启定位

					uni.getLocation({
						type: 'wgs84',
						success: function(res) {
							uni.request({
								url: "https://restapi.amap.com/v3/geocode/regeo",
								method: 'GET',
								data: {
									key: '6d77b7119a4fb52745394ea5590ccf52',
									location: `${res.longitude}, ${res.latitude}`
								},
								success: (data) => {
									_this.longitude = res.longitude
									_this.latitude = res.latitude
									_this.addressName = data.data.regeocode.addressComponent.city

								},
								fail(err) {
									console.log(err)
								}
							})

						},
						fail() {
							uni.showToast({
								title: "请检查位置是否开启",
								duration: 1500,
								icon: "none"
							});
							console.log("失败了")
							setTimeout(function() {
								permision.gotoAppPermissionSetting()
							}, 1000);
							_this.addressName = '定位失败'


						}
					});
				} else {
					uni.showToast({
						title: "请检查位置是否开启",
						duration: 1000,
						icon: "none"
					});
					setTimeout(function() {
						permision.gotoAppPermissionSetting()
					}, 1500);
					_this.addressName = '定位失败'
					return;
				}


			},

		}
	}
</script>

<style lang="less">
	.activity_t{
		width: 690rpx;
		height: 200rpx;
		background: #EEEEEE;
		margin: 0 auto;
		margin-bottom: 20rpx;
		margin-top: 10rpx;
	}
	.activity_Img{
		width: 100%;
		height: 100%;
		box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(255, 85, 81, 0.36);
		border-radius: 12rpx;
	}
	.activity-null{
		image{
			width: 340rpx;
			height: 340rpx;
		}
		text{
			color: #8b8b8b;
		}
		
		
	}

	// 分类
	.category-scroll {
		width: 90%;
	}
	.categoryFlag{
		color: #FF5551 !important;
		font-size: 32rpx !important;
		font-weight: bolder !important;
		
	}

	.category-icon {
		width: 10%;
		color: #FF5551;
	}

	.list2 {
		background-color: #fff;
		border-bottom: solid 2rpx #F8F8F8FF;
	}

	.list-3 {

		.activity {
			background-color: #fff;
			height: 180rpx;

			.describe {
				view {
					line-height: 38rpx;
					font-size: 22rpx;
					color: #999999
				}
			}

			.title {
				line-height: 45rpx;
				font-size: 30rpx;
				font-weight: bold;
			}

			image {
				width: 280rpx;
				height: 180rpx;
				border-radius: 12rpx;
			}

		}
	}
	scroll-view ::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}

	/deep/.uni-scroll-view::-webkit-scrollbar {
		display: none
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 30rpx;
		color: #333333;
	}
</style>
